<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <script type="text/javascript"  src="../js/vue.js"></script>
</head>

<!-- 收集表单数据:
若:<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若:<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值
若:<input type="checkbox"/>
1.没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值)
2.记置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked (勾选 or 未勾选，是布尔值)
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注: v-model的三个修饰符:lazy:失去焦点再收集数据number:输入字符串转为有效的数字trim: 输入首尾空格过涨 -->

<body>
    <div id="root">
        <form id="root" @submit.prevent="demo">
            账号：<input type="text" v-model.trim="userInfo.account">  </br></br>
            密码：<input type="password" v-model="userInfo.password">  </br></br>
            年龄：<input type="number" v-model.number="userInfo.age">  </br></br>

            性别:
            男<input value="male" type="radio" name="sex" v-model="userInfo.sex">
            女<input value="female" type="radio" name="sex" v-model="userInfo.sex"> </br></br>
                        女<input value="female" type="radio" name="sex" v-model="userInfo.sex"> </br></br>

            爱好:
            学习<input type="checkbox" v-model="userInfo.hobby" value="study">
            打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
            吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"></br></br>
            所属校区
            <select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="guangzhou">广州</option>
                <option value="shenzhen">深圳</option>
            </select>
            </br></br>
            其他信息:
            <textarea v-model.lazy="userInfo.other"></textarea></br></br>
            <input type="checkbox" v-model="userInfo.agree">阅读并接受 <a href="http://www.baidu.com">《用户协议》</a></br></br>
            <button>提交</button>
        </form>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false;
    let vm =new Vue({
        el:"#root",
        data:{
           userInfo:{
            account:"",
            password:"",
            age:18,
            sex:"",
            hobby:[],  //类型会影响v-model的绑定
            city:'guangzhou',
            other:'',
            agree:''
           }
        },
        methods: {
            demo(){
                // console.log(JSON.stringify(this._data))
                console.log(JSON.stringify(this.userInfo))
            }
        },
    })
</script>
</html>